<template>
  <div class="userinfo" >
    <div class="u-left">
      <n-menu :options="options" v-model:value="activeKey"></n-menu>
    </div>
    <div class="u-right">
      <router-view  v-slot="{ Component }">
        <transition>
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script>
import { h } from "vue"
export default {
  data () {
    return {
      activeKey:'info',
      options: [
        {
          label: '个人资料',
          key: 'info',
          icon: this.renderIcon('icon-geren2'),
        },
        {
          label: '账号设置',
          key: 'acount',
          icon: this.renderIcon('icon-zhanghu'),
        },
      ]
    }
  },
  methods: {
    renderIcon (icon) {
      return () => h("i", { 'class': ['iconfont', icon] }, '')
    },
    
  },
  watch:{
    activeKey:function(newV){
      this.$router.push({
        path:`/home/userInfo/${newV}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.userinfo {
  width: 85%;
  min-height: 100%;
  margin: 0 auto;
  display: flex;

  .u-left {
    width: 18%;
    min-height: 600px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px 0;
  }

  .u-right {
    width: 78%;
    min-height: 600px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
  }
}

::v-deep(.n-menu-item-content-header) {
  color: #999 !important;
  font-size: 16px !important;
  font-weight: 550 !important;
}
</style>